{% block context %}
{
    "description": "Product Pricing Plans",
    "keywords": "products,pricing,buy me",
    "plans": [
        {
            "name": "Starter",
            "price": "Free",
            "class": "success",
            "features": [1]
        },
        {
            "name": "Basic",
            "price": "$10 / month",
            "class": "danger",
            "features": [1, 2]
        },
        {
            "name": "Enterprise",
            "price": "$20 / month",
            "class": "info",
            "features": [1, 2, 3]
        }
    ],
    "features": [
        "Feature #1",
        "Feature #2",
        "Feature #3"
    ]
}
{% endblock %}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Available Pricing Plans</h2>
        </div>
    </div>
    
    <div class="row">
        {% for plan in plans %}
            <div class="col-md-4">
                <div class="panel panel-{{ plan.class }}">
                    <div class="panel-heading">
                        <h4 class="text-center">
                            {{ plan.name }} Plan - {{ plan.price }}
                        </h4>
                    </div>
                    <ul class="list-group list-group-flush text-center">
                        {% for feature in features %}
                            <li class="list-group-item
                                {% if forloop.counter not in plan.features %}
                                disabled
                                {% endif %}">
                                {{ feature }}
                            </li>
                       {% endfor %}
                    </ul>
                    <div class="panel-footer">
                        <a class="btn btn-lg btn-block btn-{{ plan.class }}" href="#">
                            BUY NOW!
                        </a>
                    </div>
                </div>
            </div>
       {% endfor %}
    </div>
    <div class="row">
        <div class="col-md-12">
            <p>{% lorem %}</p>
        </div>
    </div>
</div>